<nz-layout cdkDropListGroup>
  <nz-sider>
    <nz-card nzTitle="表单项">
      <div cdkDropList id="componentsDropList" [cdkDropListData]="components"
           [cdkDropListEnterPredicate]="dropDisable">
        <div class="form-component" *ngFor="let item of components" cdkDrag>
          <i nz-icon [nzIconfont]="item.icon"></i>
          {{item.label}}
        </div>
      </div>
    </nz-card>
  </nz-sider>
  <nz-content>
    <ng-template #previewTemplate>
      <button nz-button nzType="link" gn-modal-button content="form-preview" title="表单预览"
              [params]="{config: jsonForm.form.formGroup.value}">预览
      </button>
    </ng-template>
    <nz-card nzTitle="布局" [nzExtra]="previewTemplate">
      <form nz-form
            [nzLayout]="jsonForm.form.formGroup.value.layout||'horizontal'"
            gn-form
            [autoLoadData]="false"
            [cols]="jsonForm.form.formGroup.value.cols"
            [labelWidth]="jsonForm.form.formGroup.value.labelWidth"
            [controlWidth]="jsonForm.form.formGroup.value.controlWidth">
        <div class="empty-list form-item" *ngIf="innerValue.length === 0" [cdkDropListData]="0" cdkDropList
             (cdkDropListDropped)="drop($event)">
          请添加表单项
        </div>
        <div class="form-item" *ngFor="let itemConfig of innerValue; let i = index" [cdkDropListData]="i" cdkDropList
             (cdkDropListDropped)="drop($event)" (click)="selectItem(itemConfig)"
             [ngClass]="itemConfig === selectedItemConfig ? 'form-item-selected':''">
          <div class="cdkDrag" cdkDrag [cdkDragData]="itemConfig">
            <gn-json-form-item [config]="itemConfig">
            </gn-json-form-item>
            <div id="controls">
              <i nz-icon id="edit" nzIconfont="edit" nz-tooltip="设置选项"></i>
              <i nz-icon id="delete" nzIconfont="delete" nz-tooltip="删除该项" (click)="deleteItem(itemConfig)"></i>
              <i nz-icon id="move-handle" nzIconfont="move" cdkDragHandle nz-tooltip="移动位置"></i>
            </div>
            <span *cdkDragPreview></span>
            <div *cdkDragPlaceholder class="hold-item">
              <gn-json-form-item [config]="itemConfig">
              </gn-json-form-item>
            </div>
          </div>
        </div>
      </form>
    </nz-card>
  </nz-content>
  <nz-sider nzWidth="400px">
    <nz-card nzTitle="表单项属性">
      <nz-collapse>
        <nz-collapse-panel nzHeader="基本属性" [nzActive]="true" [nzShowArrow]="false">
          <gn-json-form #propertyBasic
                        url="/everydata-pc/assets/forms/form/form-item-property-basic.json"></gn-json-form>
        </nz-collapse-panel>
        <nz-collapse-panel nzHeader="扩展属性" [nzActive]="true" [nzShowArrow]="false">
          <gn-json-form #propertyExternal (configLoaded)="loadExternalConfig()"></gn-json-form>
        </nz-collapse-panel>
      </nz-collapse>
    </nz-card>
  </nz-sider>
</nz-layout>

